<template>
  <n-card title="推送管理" :bordered="false">
    <n-space vertical>
      <!-- 顶部操作区域 -->
      <n-space>
        <n-button type="primary" @click="handleCreatePush">
          <template #icon>
            <n-icon><PlusOutlined /></n-icon>
          </template>
          创建推送
        </n-button>
      </n-space>

      <!-- 推送配置列表 -->
      <n-data-table
        :columns="columns"
        :data="pushList"
        :pagination="pagination"
        :loading="loading"
        :scroll-x="1200"
      />
    </n-space>
  </n-card>
</template>

<script lang="ts" setup>
import { h, ref, reactive, onMounted } from 'vue';
import { PlusOutlined } from '@vicons/antd';
import { NDataTable, NButton, NTag, NSpace, useMessage } from 'naive-ui';

const message = useMessage();
const loading = ref(false);

// 设置页面标题
const setPageTitle = () => {
  document.title = '推送管理 - 分析中心';
};

onMounted(() => {
  setPageTitle();
});

// 推送配置列表数据
const pushList = ref([
  {
    id: 1,
    name: '推送配置1',
    url: 'http://example.com/push1',
    status: '在线'
  }
  // 更多示例数据...
]);

// 分页配置
const pagination = reactive({
  page: 1,
  pageSize: 10,
  showSizePicker: true,
  pageSizes: [10, 20, 30],
  showQuickJumper: true
});

// 表格列配置
const columns = ref([
  { title: '名称', key: 'name' },
  { title: '推送地址', key: 'url' },
  {
    title: '状态',
    key: 'status',
    render(row) {
      const statusColor = row.status === '在线' ? 'green' : 'error';
      return h(NTag, { type: statusColor }, row.status);
    }
  },
  {
    title: '操作',
    key: 'actions',
    render(row) {
      return h(NSpace, {}, [
        h(NButton, {
          size: 'small',
          onClick: () => handleTest(row)
        }, '测试'),
        h(NButton, {
          size: 'small',
          onClick: () => handleEdit(row)
        }, '编辑'),
        h(NButton, {
          size: 'small',
          type: 'error',
          onClick: () => handleDelete(row)
        }, '删除')
      ]);
    }
  }
]);

// 操作处理函数
function handleCreatePush() {
  message.success('创建推送配置');
}

function handleTest(row) {
  message.success(`测试推送配置：${row.name}`);
}

function handleEdit(row) {
  message.success(`编辑推送配置：${row.name}`);
}

function handleDelete(row) {
  message.success(`删除推送配置：${row.name}`);
}
</script>
